<script setup lang="ts">
import MyDialog from './components/MyDialog.vue'
import HMAvatar from './components/HMAvatar.vue'
</script>

<template>
  <div>
    <h1>你好啊</h1>
    <!-- 默认插槽 -->
    <MyDialog>
      就是这么帅
      <HMAvatar></HMAvatar>
    </MyDialog>

    <!-- 具名插槽:多个slot使用name属性区分名字,可以在指定区域进行修改   -->
    <!-- 使用具名插槽后,默认插槽不会生效,除非有一个默认的插槽 -->
    <!-- v-slot可以简写为=># -->
    <MyDialog>
      <template v-slot:buttons>
        <div>
          <button>我拒绝</button>
          <button>我接受</button>
        </div>
      </template>
    </MyDialog>

    <MyDialog>
      <template #content>
        <div>你想好去哪了吗?去海滩?</div>
      </template>
    </MyDialog>
  </div>
</template>
